import type { ProSettings } from '@ant-design/pro-components';
import { ProLayout, ProCard, PageContainer } from '@ant-design/pro-components';
import React, { useEffect, useState, useRef } from 'react';
import defaultProps from './_defaultProps';
import { Link, history } from 'umi';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import Draggable from 'react-draggable';
import type { DraggableData, DraggableEvent } from 'react-draggable';
import { Switch } from 'react-router';
import { KeyOutline } from 'antd-mobile-icons';
import './index.less';
import { Button } from 'antd';
import Market from '@/pages/market/market';
import Work from '@/pages/work/work';
import { FloatingBubble, Toast } from 'antd-mobile';
import { MessageFill } from 'antd-mobile-icons';
import { Input, Modal } from 'antd';
import '../pages/iconfont/iconfont.css';

export default (props: any) => {
  const [open, setOpen] = useState(false);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef<HTMLDivElement>(null);

  const showModal1 = () => {
    setOpen(true);
  };

  const handleOk1 = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    setOpen(false);
  };

  const handleCancel1 = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    setOpen(false);
  };

  const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };
  const routerType = {
    POP: 'back',
    PUSH: 'dg',
    REPLACE: 'dg',
  };
  const settings: ProSettings | undefined = {
    fixSiderbar: true,
    layout: 'mix',
    splitMenus: true,
  };

  const [pathname, setPathname] = useState('/welcome/market');
  const img = (
    <img src="https://erpdemo.fanpusoft.com/Images/Logo/637520963340736067_637518569831196922_logo.png"></img>
  );
  const [tabList, setTabList] = useState([
    {
      tab: '销售门户',
      key: '/welcome/market',
      closable: false,
    },
  ]);
  const [mname, setMname] = useState('我的门户');
  const [tabActiveKey, setTabActiveKey] = useState('/welcome/market');
  useEffect(() => {
    history.push('/welcome/market');
  }, []);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onClick = () => {
    history.push('/info_bubble');
  };
  // 管理
  const [state,setState] = useState(false)
  // 存储上次的路由
  const [eaPath,setPath] = useState("/welcome/market")

  return (
    <>
      <ProLayout
        title={img}
        {...defaultProps}
        location={{
          pathname,
        }}
        menu={{
          type: 'group',
        }}
        fixSiderbar
        onMenuHeaderClick={(e) => { }}
        menuItemRender={(item: any, dom: any) => (
          <div
            onClick={() => {
              const list: any = {
                tab: item.name,
                key: item.key,
              };
              if(list.tab === "管理"){
                setState(true)
                history.push(pathname);

                return false
              }
              else if (item.name === '日常工作') {
                list.closable = false;
                setTabList([list]);
                setTabActiveKey(item.key);
              } else if (item.name === '销售门户') {
                list.closable = false;
                setTabList([list]);
                setTabActiveKey(item.key);
              } else if (item.pro_layout_parentKeys.length !== 0) {
                const isTrue = tabList.some((sub) => sub.key === item.key);
                if (!isTrue) {
                  tabList.push(list);
                  setTabList(tabList);
                }
                setTabActiveKey(item.key);
                history.push(item.key);
              } else {
                //tab标签的判断
                let a = tabList.some(items => {
                  return items.key == item.path
                })
                let list_ = ['人事','计划',"管理","资料"]
                if (!list_.includes(item.name)) {
                  if (a) {
                    setTabActiveKey(item.key);                    
                  }
                  else {                    
                    setTabList([...tabList, { 'tab': item.name + '门户', 'key': item.path }])
                    setTabActiveKey(item.key);
                  }
                }
              }
              // 0000


              if (item.pro_layout_parentKeys.length === 0) {
                setMname(item.name);
              }
              if(item.path !== "/Administration"){                
                setPathname(item.path || '/welcome/market');
                return false
              }              
            }}
          >
            <Link to={item.path ?? '/welcome/market'}>{dom}</Link>
          </div>
        )}
        logo={() => { }}
        menuHeaderRender={() => {
          const div = (
            <div className="mleft">
              <div
                style={{
                  width: '10',
                  height: '10px',
                  position: 'absolute',
                  top: '10%%',
                  left: '85%',
                }}
                onClick={() => {
                  history.push('/login');
                }}
              >
                <span className="iconfont icon-tuichu"></span>
              </div>
              <div className="logotitle">
                <img src="https://erpdemo.fanpusoft.com/UpLoader/Image/202103/637518604254601287_11.jpg" />
                <dl>
                  <dd
                    onClick={() => {
                      history.push('/imgName');
                    }}
                  >
                    姓名：张研
                  </dd>
                  <dd
                    onClick={() => {
                      history.push('/imgDepartment');
                    }}
                  >
                    部门：总经办
                  </dd>
                  <dd onClick={showModal1}>职位：总经理</dd>
                </dl>
              </div>
              <h4>{mname}</h4>
            </div>
          );
          return div;
        }}
        {...settings}
        fixedHeader={true}
      >
        <PageContainer
          ghost
          header={{
            title: '',
            breadcrumb: {},
          }}
          tabProps={{
            type: 'editable-card',
            hideAdd: true,
            onEdit: (e, action) => {
              if (action === 'remove') {
                const list = tabList.filter((item) => item.key !== e);
                setTabList(list);
                tabList.map((item, index) => {
                  if (item.key === e && e === tabActiveKey) {
                    setTabActiveKey(tabList[index - 1].key);
                    history.push(tabList[index - 1].key);
                  }
                });
              }
            },
          }}
          tabList={tabList}
          onTabChange={(key: any) => {
            history.push(key);
            setTabActiveKey(key);
          }}
          tabActiveKey={tabActiveKey}
        ></PageContainer>
        <ProCard style={{ height: '140vh' }} className="proCard">
          
          <KeyOutline
            style={{
              top: '80px',
              position: 'fixed',
              zIndex: '200',
              right: '20px',
            }}
            onClick={() => {
              localStorage.removeItem('koten');
              history.push('/login');
            }}
          />
          <TransitionGroup
            style={{ height: '100%' }}
            className="transition_wrapper"
            childFactory={(child: any) =>
              React.cloneElement(child, {
                classNames: routerType[history.action],
              })
            }
          >
            <CSSTransition key={location.pathname} appear timeout={2000}>
              <Switch location={location}>
                {pathname.split('/').length === 2 &&
                  tabList[0].key === '/welcome/market' ? (
                  <Market />
                ) : pathname.split('/').length === 2 &&
                  tabList[0].key === '/welcome/work' ? (
                  <Work />
                ) : (
                  props.children
                )}
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        </ProCard>
            <Modal open={state} onOk={()=>{setState(false)}}>
              {/* <Button>提交</Button> */}
            </Modal>
        <Modal
          title="职位"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
          }
        ></Modal>
        <Modal
          footer={
            [] // 设置footer为空，去掉 取消 确定默认按钮
          }
          title={
            <div
              style={{
                width: '300px',
                cursor: 'move',
              }}
              onMouseOver={() => {
                if (disabled) {
                  setDisabled(false);
                }
              }}
              onMouseOut={() => {
                setDisabled(true);
              }}
              // fix eslintjsx-a11y/mouse-events-have-key-events
              // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
              onFocus={() => { }}
              onBlur={() => { }}
            // end
            >
              职位
            </div>
          }
          open={open}
          onOk={handleOk1}
          onCancel={handleCancel1}
          modalRender={(modal) => (
            <Draggable
              disabled={disabled}
              bounds={bounds}
              onStart={(event, uiData) => onStart(event, uiData)}
            >
              <div ref={draggleRef}>{modal}</div>
            </Draggable>
          )}
        >
          {' '}
          <ul className="ul_placeholder">
            <li style={{ display: 'flex' }}>
              <label style={{ padding: '5px 5px 5px 10px', marginTop: '10px' }}>
                岗位职责：
              </label>
              <Input
                style={{
                  width: '60%',
                  height: '80px',
                  border: '1px solid #d4d4d4',
                  float: 'right',
                  marginTop: '10px',
                }}
              />
            </li>
            <li style={{ display: 'flex' }}>
              <label style={{ padding: '5px 5px 5px 10px' }}>岗位描述：</label>
              <Input
                style={{
                  width: '60%',
                  height: '80px',
                  border: '1px solid #d4d4d4',
                  float: 'right',
                }}
              />
            </li>
          </ul>
        </Modal>
      </ProLayout>
      {/* <div className='info_layouts' style={{ width: "30px", height: "30px", borderRadius: "50%", backgroundColor: "Red" }}>
          信息
        </div> */}
      <div
        style={{
          textAlign: 'center',
          padding: '50vh 32px 0',
        }}
      >
        <FloatingBubble
          style={{
            '--initial-position-bottom': '24px',
            '--initial-position-right': '24px',
            '--edge-distance': '24px',
            '--background': '#5377b6',
          }}
          onClick={onClick}
        >
          <MessageFill fontSize={32} />
        </FloatingBubble>
        {/* ceshi */}
        {/* dev分支测试 */}
      </div>
    </>
  );
};
